* {
	margin: 0;
	padding: 0;
}
			
.nav {
	width: 100%;
	height: 44px;
	background: rgba(0,0,0,0.8);
	display: flex;
	justify-content: center;
	align-items: center;
}
.nav a {
	color: #fff;
	/**
	 * 设置下划线,underline-默认
	 */
	text-decoration: none;
	width: 102px;
	text-align: center;
}

.nav .logo {
	height: 44px;
	background: url(../img/logo.svg);
	background-repeat: no-repeat;
	background-position: center;
}

.nav .search {
	background-size: 18px 88px;
	height: 44px;
	background: url(../img/search.svg);
	background-repeat: no-repeat;
	background-position: center center;
}

.nav .buy {
	height: 44px;
	background: url(../img/buy.svg);
	background-repeat: no-repeat;
	background-position: center;
}


.toggleBtn {
	height: 44px;
	/* display: flex; */
	flex-direction: column;
	/* justify-content: space-evenly; */
	justify-content: center;
	align-items: center;
	position: relative;
}

.toggleBtn .line {
	height: 1px;
	width: 18px;
	background-color: #fff;
	/* margin: 6px; */
	 display: none; 
	transition:  all .5s;
	/* 设置中心点 */
	transform-origin: left center;
}
.toggleBtn .line:nth-child(1){
	position: absolute;
	left: calc(50% - 9px);
	top: 14px
}
.toggleBtn .line:nth-child(2){
	position: absolute;
	left: calc(50% - 9px);
	top: 26px
}

.navpage {
	display: flex;
	width: 100vw;
	height: 0vh;
	transition: all 1s;
	overflow: hidden;
	position: fixed;
	left: 0;
	top: 0;
	background-color: #FFF;
}
.navpage .navMain {
	width: 100%;
}

/**
 * 设置屏幕小于768px的样式
 */
@media only screen and (max-width: 768px){
	.toggleBtn {
		display: flex;
		z-index: 100;
		position: relative;
	}
	.nav .logo {
		z-index: 100;
		position: relative;
	}
	.toggleBtn .line {
		display: block;
	}
	.nav .text,.nav .search {
		display: none;
	}
	.nav {
		justify-content: space-between;
	}
	
	.nav a,.nav label{
		width: 50px;
	}
	
	.nav .toggleBtn{
		order: 1;
	}
	.nav .logo{
		order: 2;
	}
	.nav .buy{
		order: 3;
	}
	
	#choose:checked~.toggleBtn .line:nth-child(1){
		transform: rotate(45deg);
	}
	
	#choose:checked~.toggleBtn .line:nth-child(2){
		transform: rotate(-45deg);
	}
		
	/* 设定复选框为选择状态，导航页显示	 */
	#choose:checked~.navpage {
		display: flex;
		/* 
		vw:viewport width :100vw == 100%
		vh:viewport height 100vh == 100%
		 */
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-color: #000;
		color: #fff;
		flex-direction: column;
		padding-top: 54px;
	}
	.searchInput {
		margin:  0 28px 10px;
		/* width: 100%; */
		/* flex: 1; */
		display: flex;
		justify-content: flex-start;
		/* 侧轴居中 */
		align-items: center;
		height: 36px;
		border-radius: 4px;
		color: #ccc;
		background-color: rgba(45,45,45,0.98);
	}
	.searchInput .icon {
		width: 32px;
		height: 36px;
		background-image: url(../img/search.svg);
		background-repeat: no-repeat;
		background-position: center;
		/* 插入图片要考虑要不要重复，尺寸，位置 */
		
	}
	
	.searchInput input {
		flex:  1;
		margin: 0 10px;
		width: 100%;
		background: transparent;
		border: none;
		outline: none;
		color: #FFFFFF;
	}
	
	hr {
		border-color: #333;
	}
	
	.navList {
		margin: 0 28px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		
	}
	
	.navList a {
		width: 100%;
		height: 44px;
		color: #fff;
		text-align: left;
		border-bottom: 1px solid #333;
		line-height: 44px;
	}
	
	.navList a:last-child {
		border-bottom: none;
	}
}


	